<template>
  <div class="nav">
    <div class="nav-content">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal" :ellipsis="false">
        <el-menu-item class="logo-item" @click="$router.push({name: 'home'})">
          <div class="logo">
            <span class="logo-text">H-DOT</span>
          </div>
        </el-menu-item>
      </el-menu>  
        <div class="flex-grow"/>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :router="true"
          :ellipsis="false">
        <el-menu-item index="0" :route="{name: 'home'}">任务中心</el-menu-item>
        <el-menu-item index="1" v-if="currentUser.is_staff" :route="{name: 'task-center'}">学生中心</el-menu-item>
        <el-menu-item index="2" v-if="currentUser.is_staff" :route="{name: 'task-extra'}">任务精讲</el-menu-item>
        <el-menu-item index="3" v-if="currentUser.is_staff" :route="{name: 'group'}">人员组管理</el-menu-item>
        <el-sub-menu index="8">
          <template #title>
            <el-icon><Avatar/></el-icon>
            <span style="margin-left:4px;">{{ currentUser.name }}</span>
          </template>
          <el-menu-item @click="switchClazz">切换班级</el-menu-item>
          <el-menu-item @click="modifyPwd">修改密码</el-menu-item>
          <el-menu-item index="8-3" :route="{name: 'login'}">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>

  <!-- 切换班级 -->
  <el-dialog v-model="showDialog" title="切换班级" width="500">
      <ClassSwitchView />
      <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">保存</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改密码 -->
  <el-dialog v-model="showDialog2" title="修改密码" width="500">
      <ModifyPasswordView />
      <template #footer>
      <!-- <div class="dialog-footer"> -->
        <!-- <el-button type="primary" @click="showDialog2 = false">保存</el-button>
        <el-button @click="showDialog2 = false">关闭</el-button> -->
      <!-- </div> -->
    </template>
  </el-dialog>

</template>

<script>
import Token from '@/api/token.js' ;
import ClassSwitchView from '@/views/clazz/ClassSwitchView.vue';
import ModifyPasswordView from '@/views/ModifyPasswordView.vue';

export default {
  props: {
    activeIndex: {
      type: [String, Number],
      required: false,
      default: "0",
    }
  },
  methods: {
    switchClazz() {
      this.showDialog = true ;
    },
    modifyPwd() {
      this.showDialog2 = true ;
    }
  },
  data() {
    return {
      currentUser: Token.getUser(),
      showDialog: false,
      showDialog2: false,
    }
  },
  components: {
    ClassSwitchView,
    ModifyPasswordView
  }
}
</script>

<style scoped>
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(21, 24, 42, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
}

.nav-content {
  margin: 0 auto;
  padding: 0 var(--side-padding);
  display: flex;
  align-items: center;
}

.el-menu {
  --el-menu-bg-color: transparent !important;
  --el-menu-text-color: #e6e8f0 !important;
  --el-menu-hover-text-color: #ffffff !important;
  --el-menu-active-color: #7a9dff !important;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.05) !important;
  --el-menu-border-color: transparent !important;
  
  width: auto;
  margin-left: 0;
  border: none !important;
}

:deep(.el-menu-item) {
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

:deep(.el-menu-item.is-active) {
  background: rgba(122, 157, 255, 0.1) !important;
  border-bottom: 2px solid var(--el-menu-active-color);
}

:deep(.el-menu-item:hover) {
  background: var(--el-menu-hover-bg-color);
}

:deep(.el-sub-menu__title) {
  border-bottom: 2px solid transparent;
  color: var(--el-menu-text-color) !important;
}

:deep(.el-sub-menu__title:hover) {
  background: var(--el-menu-hover-bg-color) !important;
  color: var(--el-menu-hover-text-color) !important;
}

.flex-grow {
  flex-grow: 1;
}

/* 下拉菜单样式 */
:deep(.el-menu--popup) {
  background: rgba(21, 24, 42, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px;
}

:deep(.el-menu--popup .el-menu-item) {
  color: #e6e8f0 !important;
  border-radius: 6px;
}

:deep(.el-menu--popup .el-menu-item:hover) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

:deep(.el-menu--popup .el-menu-item.is-active) {
  background: rgba(122, 157, 255, 0.1) !important;
  color: #7a9dff !important;
}

.logo-item {
  padding: 0 20px !important;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(45deg, #4a80ff, #6e5eff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  font-family: 'Arial', sans-serif;
}

@media (max-width: 600px) {
  .nav-content {
    flex-direction: row;
    padding: 0 4px;
    min-height: 44px;
    height: 44px;
    align-items: center;
    gap: 0;
  }
  .el-menu {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 13px;
    padding: 0;
    margin: 0;
  }
  .logo-item {
    padding: 0 6px !important;
    margin-right: 0 !important;
  }
  .logo {
    margin-left: 0;
  }
  .logo-text {
    font-size: 16px;
    letter-spacing: 0.2px;
  }
  .flex-grow {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
  }
  :deep(.el-menu-item), :deep(.el-sub-menu__title) {
    padding: 0 6px !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }
  :deep(.el-menu--popup) {
    min-width: 100px !important;
    font-size: 13px !important;
  }
  /* 弹窗宽度适配 */
  :deep(.el-dialog) {
    width: 96vw !important;
    min-width: 0 !important;
    max-width: 98vw !important;
    left: 2vw !important;
    right: 2vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
</style>

